Small Screen CSS Optimization

 

On an iPhone's small screen the zhurnaly.com main pages, the ^zhurnaly archive pages, and many ZhurnalyWiki pages are hard to read and/or unæesthetic. The architect of the Oddmuse Wiki, Alex Schröder, has a blog which sometimes comments on mobile device issues, and that recently led me to think about how to improve the zhurnaly.com Cascading Style Sheet (CSS) which advises browsers how to render a wiki page. The Oddmuse CSS discussion was extremely helpful. Changes to http://zhurnaly.css were guided by three principles:

  • improve the usability of as many zhurnaly.com pages as possible on small screens
  • don't make the site look worse on larger screens
  • don't spend too much time on the project

Key modifications of http://zhurnaly.css were focused on making the font used on most pages a reasonable size on the mobile device screen, keeping embedded quotation blocks readable, and handling tables more gracefully. A CSS file can detect an iPhone browser by the logic "@media only screen and (max-device-width: 480px)". In words, the zhurnaly.com CSS now asks an iPhone to:

  • make the "body" font 3 times larger than it would normally appear
  • make the font size used in tables small
  • shrink the otherwise-obtrusive "goto bar" that appears at top and bottom of ZhurnalyWiki pages
  • make the footer section of the page be small

That iPhone-specific section of the CSS thus looks like:

@media only screen and (max-device-width: 480px) {
    body { font-size: 300%; }
    table.user { font-size: small; }
    span.gotobar { font-size: small; }
    div.footer { font-size: small; }
 }

The only other change to the Zhurnaly CSS, which applies to all browsers (not just iPhone's Safari) was to tell browsers to make the font used in quotation blocks relatively "smaller" than normal, rather than the absolute "small" size: "blockquote { font-size: smaller; }". These changes seem to improve the presentation of >80% of ^zhurnaly pages. Bug reports and suggestions for further improvements are welcome. So are comments on how other small-screen devices render pages. Thank you!

(cf. http://www.oddmuse.org/cgi-bin/oddmuse/Small_Screens ...) - ^z - 2012-04-30